<template>
 <div class="role-popup">
   <el-dialog
     :before-close="_close"
     :visible.sync="propValue"
     title="权限配置"
     width="50%"
     top="5vh"
   >
     <div style="max-height:70vh;overflow-x: hidden">
       <el-tabs class="tabs" v-model="activeName" stretch type="border-card" @tab-click="handleClick">
         <el-tab-pane label="菜单权限" name="1">
           <el-tree
             ref="menu"
             empty-text="暂无配置"
             default-expand-all
             :data="menuData"
             :default-checked-keys="menuPermissions"
             node-key="value"
             show-checkbox
           ></el-tree>
         </el-tab-pane>
         <el-tab-pane label="接口权限" name="2">
           <el-tree
             ref="apiScope"
             :data="apiScopeData"
             empty-text="暂无配置"
             default-expand-all
             :default-checked-keys="apiScopePermissions"
             node-key="value"
             show-checkbox
           ></el-tree>
         </el-tab-pane>
       </el-tabs>
       <div slot="footer" class="btn-box">
         <span  class="dialog-footer">
            <el-button size="medium" type="primary" @click="onSubmit">保存</el-button>
            <el-button size="medium" @click="_close">取消</el-button>
        </span>
       </div>
     </div>
   </el-dialog>
 </div>
</template>
<script>

export default {
  name: 'rolePopup',
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    currentData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      activeName: '1',
      menuData: [],
      menuPermissions: [],
      apiScopeData: [],
      apiScopePermissions: [],
      checkStrictly: true,
    }
  },
  computed: {
    propValue: {
      get() {
        this.activeName =  '1'
        return this.value
      },
      set(nval) {
        this.$emit('input', nval)
      },
    },
  },
  methods: {
    async findAllTree() {
      let {code, data} = await this.$api.menu.findAllTree()
      if (code === 200) {
        await this.getRolePermissions(data)
      }
    },

    async getRolePermissions(treeData) {
      let params = {
        roleId: this.currentData.id,
      }
      let {code, data} = await this.$api.permission.roleMenu.getMenuByRoleId(params)
      if (code === 200) {
        this.menuPermissions = data.filter(v => !v.hasChildren).map(v => {return v.menuId})
        this.menuData = treeData
      }
    },

    async findApiByMenuTree() {
      let {code, data} = await this.$api.permission.apiScope.findApiByMenuTree()
      if (code === 200) {
        await this.getApiIdByRoleId(data)
      }
    },

    async getApiIdByRoleId(treeData) {
      let params = {
        roleId: this.currentData.id,
      }
      let {code, data} = await this.$api.permission.roleApi.getApiIdByRoleId(params)
      if (code === 200) {
        this.apiScopePermissions = data
        this.apiScopeData = treeData
      }
    },

    handleClick(tab, event) {
      +this.activeName === 1 ? this.findAllTree(): this.findApiByMenuTree()
    },

    onSubmit() {
      // console.log('选中的包含父级keys', this.$refs.menu.getCheckedKeys())
      // console.log('选中的不包含父级keys', this.$refs.menu.getCheckedKeys(true))
      // console.log('全部选中包含半选', this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys()))

      +this.activeName === 1 ? this.roleAddMenu(): this.roleAddApi()
    },
   async roleAddMenu(){
      let params = {
        roleId: this.currentData.id,
        menuIds: this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys()),
      }

      let {code, msg} =  await this.$api.permission.roleMenu.roleAddMenu(params)

      if (code === 200) {
        this.$message.success('配置成功' || msg)
        this.$emit('input', false)
      }
    },

    async roleAddApi(){
      let params = {
        roleId: this.currentData.id,
        apiIds: this.$refs.apiScope.getCheckedKeys().concat(this.$refs.apiScope.getHalfCheckedKeys()),
      }

      let {code, msg} =  await this.$api.permission.roleApi.roleAddApi(params)

      if (code === 200) {
        this.$message.success('配置成功' || msg)
        this.$emit('input', false)
      }
    },

    //关闭弹窗
    _close() {
      this.menuData = []
      this.permissions = []
      this.$emit('input', false)
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep.role-popup{
  .el-tabs{
    position: relative;
    max-height: 70vh;
    overflow-y: scroll;
  }
  .btn-box{
    position: absolute;
    bottom: 30px;
    right: 40px;
    z-index: 999999;
    .dialog-footer{

      .el-button{
        margin-top: 20px!important;
      }

    }
  }


}

</style>
